<template>
    <div>
      <van-sticky>

        <div class="demo-nav" style>
          <div class="demo-nav__title">装修施工</div>
          <router-link :to="'/'" class="demo-nav__back">
            <svg viewBox="0 0 1000 1000" >

              <path fill="#969799" fill-rule="evenodd" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z">
              </path>

            </svg>
          </router-link>
        </div>
      </van-sticky>
      <div>
        <van-search
          v-model="value"
          show-action
          label=""
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </div>

      <div>
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img class="img_tu" v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <!--<div style="border-color:#a46e4a;border-width:1px">aaa</div>-->
      <!--<div ></div>-->

      <van-form style="text-align: center;background-color: #dcdee0;padding: 0.5rem">
        <van-row>
          <van-col span="12">
            <van-cell is-link :value="areaTest" @click="showArea = true"/>
            <van-action-sheet v-model="showArea" title="地址">
              <van-area
                :area-list="areaList"
                :columns-placeholder="['请选择', '请选择', '请选择']"
                @cancel="cancelArea"
                @confirm = "confirmArea"
              />
            </van-action-sheet>
          </van-col>
          <van-col span="1"></van-col>
          <van-col span="7">

            <van-field
              readonly
              clickable
              name="picker"
              v-model="value"
              label=""
              right-icon="arrow-down"
              placeholder="类型"
              @click="showPicker = true"
            />

            <van-popup v-model="showPicker" position="bottom">
              <van-picker
                show-toolbar
                :columns="columns"
                @confirm="onConfirm"
                @cancel="showPicker = false"
              />
            </van-popup>

            <!--<van-field-->
              <!--placeholder="用户名"-->
              <!--v-model="username"-->
            <!--/>-->
          </van-col>
          <van-col span="4">
            <div >
              <van-button style="height: 2.3rem" color="grey" native-type="submit" @click="submitButton">搜索</van-button>
            </div>
          </van-col>

        </van-row>

      </van-form>
      <!--<van-form >-->

        <!--<div v-for="itema in reslist" style="margin: 16px;">-->
          <!--****{{itema.name}}***-->
        <!--</div>-->
      <!--</van-form>-->









      <div v-for="item in indexList">
        <!--这里有一个BUG 就是路由跳转的时候  需要图片和文字都要获取到id进行跳转-->
        <van-grid :column-num="2" :square="true" :border="false" >

          <van-grid-item @click="tiaohzuan(item.constructionId,item.supplierId)">
            <van-image
              width="10rem"
              height="10rem"
              :src="item.shoutu"
            />

          </van-grid-item>
          <van-grid-item  @click="tiaohzuan(item.constructionId,item.supplierId)" align="left">
            <div>
              <!--<template slot-scope="scope">-->
              <!--<router-link :to="'/warehouse/type/waproduct/' + scope.row.wid" class="link-type">-->
              <!--<span>item.aaa</span>-->
              <!--</router-link>-->
              <!--</template>-->
              <p>{{item.shopsName}}</p>
              <p style="font-size: 0.6rem">已交保证金{{item.balanceMoney}}元</p>
              <p ><van-rate v-model="item.threeTeamId" allow-half void-icon="star" void-color="#eee" /></p>
<!--              <p style="font-size: 0.6rem">{{item.descript}}</p>-->
              <p style="font-size: 0.6rem">{{item.address}}</p>
              <p style="font-size: 0.6rem">距离:2.8km</p>

            </div>
          </van-grid-item>


        </van-grid>

        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }" />

      </div>
      <!--<el-pagination-->
      <!--:page-size="params.pageSize"-->
      <!--:current-page="params.pageNum"-->
      <!--@pagination="findAllListBuildingTwo"-->
    <!--&gt;-->
    <!--</el-pagination>-->

    </div>
</template>

<script>
  import areaList from '@/utils/area';
  import { findAllListBuildingTwo, findAllById,findAlladdres,zhuangxiuList,teamNameZhuang } from "@/api/constructionTeam/building";
  import {  province, findByprovinceCode, findBycityCode } from "@/api/commodity/shop_product";
  // import Vue from 'vue'
  // import ElementUI from 'element-ui';
  // import 'element-ui/lib/theme-chalk/index.css';
  // Vue.use(ElementUI);
    export default {
        name: "DecorationProcess",
      data(){
        return{
          teamNamea:"",
          value: '',
          columns: [],
          showPicker: false,
          reslist:[],
          addressaa:"",
          form:{},
          // 选择地区展示
          showArea:false,
          areaTest:"请选择省市区",
          areaList,
          constructionId: '',
          // params: {
          //   pageNum: 1,
          //   pageSize: 10,
          // },
          indexList:[],
          indexListaaa:[],
          valuepx: 2.5,
          // 显示搜索条件
          showSearch: true,
          show: false,

          images: [
            require(
              '@/assets/xiu1.jpg',
            ),
            require(
              '@/assets/xiu2.png',
            ),
            require(
              '@/assets/xiu3.jpg',
            )
          ],

          AddressProvince: [],//省份集合
          AddressCity: [],//城市集合
          AddressTown: [],//区域集合
          provinceCode: '',//获取选中时的省份编号
          cityCode: '',//获取选中时的城市编号
          townCode: '', //获取选中时区域的编号
        }
      },

      created(){
        this.carouselArea = this.$route.query && this.$route.query.carouselArea;
        this.init();
        this.findAllListBuildingTwo();
        this.zhuangxiuList();
        // this.findAlladdresaa(address);
      },
      watch:{
        provinceCode:{
          handler () {
            this.AddressCity =[];
            this.AddressTown = [];
            this.cityCode ="";
            this.townCode="";
            this.findByprovince();
          }
        },

        cityCode: {
          handler () {
            this.findBycity();
          }
        }

      },
      methods: {

        zhuangxiuList(){
          zhuangxiuList().then(res=>{
            for(let i=0;i<res.data.length;i++){
              this.columns[i] = res.data[i].teamName;
              console.log("** this.columns**"+ this.columns)
            }
          })
        },

        onConfirm(value) {
          this.value = value;
          this.showPicker = false;
        },
        // findAlladdresaa(address){
        //
        // },


        // 地址取消事件
        cancelArea(res){
          this.showArea = false;
        },

        submitButton(){
          var teamName = this.value;
          teamNameZhuang(teamName).then(res=>{
            this.indexList = res.data;
          })
        },

        // 地址确定事件
        confirmArea(res){
          this.areaTest = "";
          for (let i = 0; i < res.length; i++){
            this.areaTest += res[i].name;
            // console.log("**********areaTest************"+areaTest)
          }
          for (let i=0;i<res.length;i++){
            console.log(this.addressaa = res[0].name+res[1].name+res[2].name+"assaasasasaassasasa")
          }
          var address = this.addressaa;
          findAlladdres(address).then(res=>{
            this.indexList = res.data;
          })

          this.showArea = false;
        },


        tiaohzuan(constructionId,supplierId){
          this.$router.push({path:"/ShopDetails",
            query:{
            constructionId: constructionId,
              supplierId: supplierId,
              stat:2
          }});
        },

        findAllListBuildingTwo(){

          if (this.carouselArea == ''){
            console.log("1111111111111111")
            findAllListBuildingTwo(this.params).then(res=>{
              this.indexList = res.data.rows;
            })
          }else{
            console.log("0000000000000000000000000")
            var address = this.carouselArea;
            findAlladdres(address).then(res=>{
              this.indexList = res.data;
            })

          }
        },


        init(){
          var that = this;
          province().then(res=>{
            that.AddressProvince = res.data;
        })
        },

        findByprovince(){
          findByprovinceCode(this.provinceCode).then(res=>{
            this.AddressCity = res.data;
        })
        },

        findBycity(){
          findBycityCode(this.cityCode).then(res=>{
            this.AddressTown = res.data;
        })
        },






        /** 搜索按钮操作 */
        handleQuery() {
          this.params.pageNum = 1;
          this.findAllListBuildingTwo();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
        },

        onSearch(){
          console.log("111")
        },


        showPopup() {
          console.log("88888")
          this.show = true;
        },


      },

    }
</script>

<style scoped>

  .goods-card {
    margin: 0;
    background-color: @white;
  }
  .divcss5{width:5rem;height:2rem;border:0.1rem solid #F00}
  .delete-button {
    height: 100%;
  }

  .demo-nav{
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 3.2rem;
    background-color: #fff;
  }
  .demo-nav__title {
    font-weight: 450;
    font-size: 1.3rem;
    text-transform: capitalize;
  }
  .demo-nav__back {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .img_tu{
    width: 100%;
    height: 10rem;
  }

  .search_bar {
    display: flex;
    height: 10.133vw;
    width: 100%;
    margin-top: 1.867vw;
    line-height: 10.133vw;
    font-size: 3.733vw;
    background-color: #ffffff;
    border-radius: 13.333vw;
    box-shadow: 0.533vw 0.533vw 1.333vw rgb(219, 219, 219);
    padding: 0px 19.999px;
    box-sizing: border-box;
  }
  .hot_key {
    color: #000000;
  }
  .search_icon {
    line-height: 10.133vw;
    font-size: 4.8vw;
    margin-right: 2.667vw;
    color: #999999;
  }
  .content {
    padding: 0.16rem 0.16rem 1.6rem;
  }
  .index_header {
    height: 14.4vw;
    background-color: #ffffff;
    box-sizing: border-box;
    width: 100%;
    padding: 0px 4vw;
  }
  .area {
    height: 14.4vw;
    line-height: 14.4vw;
    color: #777777;
    width: 100%;
  }
</style>
